<template>
  <div id="single-blog">
    <h1>{{blog.title}}</h1>
    <article>{{blog.content}}</article>
    <p>作者：{{blog.author}}</p>
    <ul>
      <li v-for="data in blog.categories" :key="data">{{data}}</li>
    </ul>
    <button @click="deleteSingleBlog()">删除</button>
    <router-link :to="'/edit/'+id" target="_blank">编辑</router-link>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "single-blog",
  data() {
    return {
      id: this.$route.params.id,
      blog: {}
    };
  },
  methods: {
    deleteSingleBlog() {
      this.$http
        .delete(
          "https://vuedemo-8dc9d.firebaseio.com/posts/" + this.id + ".json"
        )
        .then(response => {
          this.$router.push({ path: "/" });
        });
    }
  },
  created() {

      axios.get("/posts/" + this.id + ".json")
      .then((data)=> {
        console.log(data);
        // this.blog = data.body;
        this.blog = data.data;
      })

  }
};
</script>
<style scoped>
#single-blog {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background: #eeeeee;
  border: 1px solid #aaaaaa;
}
button,a{
    margin: 20px 0;
    background: crimson;
    color: #fff;
    border: 0;
    padding:5px 14px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

</style>